<template>
  <div class="hearder">
    <div class="navbar wrapper">
      <div class="left">
        <div class="hearder-logo">
          <router-link class="logo" to="/">
            <img class="logo-tp" src="../assets/nav-logo.png" alt="" />
            <h1 class="logo-title">腾讯问卷</h1>
          </router-link>
        </div>

        <div class="nav">
          <ul>
            <li class="nav-item">
              <router-link class="nav-link" to="/guide">创建问卷</router-link>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">我的问卷</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">回答小组</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">调查资讯</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">帮助中心</a>
            </li>
          </ul>
        </div>
      </div>

      <div class="right">
        <!-- <a class="enter" href="">登录</a> -->
        <!-- 登入后的 -->
        <div class="user-logo"></div>
        <img class="user-tx" src="../assets/user-tx.jpg" alt="" />
        <span class="user-name">贵懒</span>
        <span class="divide">|</span>
        <a class="user-quit" href="">退出</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    wide: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style scoped>

.hearder-wide {
  width: auto;
  max-width: 1440px;
  min-width: 980px;
}

a {
  color: #333;
  text-decoration: none;
}

ul {
  padding: 0;
}

.logo:hover,
.user-quit:hover {
  color: #2f8cd8;
}

.enter:hover {
  background-color: #55aa00;
}

.left,
.right {
  display: flex;
  align-items: center;
}

.hearder {
  height: 60px;
  position: fixed;
  background-color: #fff;
  top: 0;
  border-bottom: 1px solid #eaeaea;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  left: 0;
  right: 0;
  z-index: 1000;
}

.navbar {
  display: flex;
  /* width: 1000px; */
  height: 60px;
  /* padding: 0 20px; */
  /* margin-left: auto; */
  /* margin-right: auto; */
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-tp {
  display: inline-block;
  height: 32px;
}

.logo-title {
  display: inline-block;
  font-size: 21px;
  font-weight: normal;
  font-family: tencentFont, sans-serif;
  margin-left: 5px;
}

.nav {
  margin-left: 59px;
}

.nav-item {
  display: inline-block;
  margin-right: 50px;
  font-size: 17px;
}

.nav-link {
  display: inline-block;
  height: 60px;
  line-height: 60px;
  position: relative;
}

.nav-link.router-link-exact-active,
.nav-link:hover {
  color: #2f8cd8;
}

.nav-link.router-link-exact-active::after,
.nav-link:hover::after {
  content: "";
  display: inline-block;
  width: 68px;
  height: 2px;
  background-color: #2f8cd8;
  position: absolute;
  bottom: 0;
  left: 0;
}

.enter {
  display: inline-block;
  width: 70px;
  height: 34px;
  background-color: #80c200;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  color: #fff;
}

/* 登入后的user */
.user-logo {
  width: 20px;
  height: 20px;
  background: url("../assets/user.png") no-repeat;
  background-size: 100%;
}

.user-tx {
  width: 25px;
  border-radius: 50%;
  margin-left: 20px;
  margin-right: 3px;
}

.user-name {
  font-size: 14px;
  color: #333;
  margin-right: 6px;
}

.divide {
  color: #999;
  font-size: 14px;
  margin: 0 2px;
  position: relative;
  top: -1px;
}

.user-quit {
  font-size: 14px;
  color: #333;
  margin-left: 6px;
}

@font-face {
  font-family: tencentFont;
  src: url("../assets/fontmin.ttf");
}
</style>

<style>
body {
  margin: 0;
}
</style>
